<template>
    <a-spin :spinning="spinning" tip="Loading...">

<!--                                <a-checkable-tag v-for="(tag, i) in tags" :key="tag" v-model:checked="tags[i].checked"-->
<!--                                    closeIcon="CloseCircleOutlined" @change="handleChange(tag, tags[i].checked)">{{-->
<!--                                        tag.label }}</a-checkable-tag>-->
<!--                                <a-tag color="#2db7f5" @click="labelPageChange()">{{ "+" + numOfLabel }}</a-tag>-->

<!--                                <a-checkable-tag v-for="(tag, i) in tagsSearch" :key="tag"-->
<!--                                    v-model:checked="tagsSearch[i].checked"-->
<!--                                    @change="handleChange(tag, tagsSearch[i].checked)">{{-->
<!--                                        tag.label }}</a-checkable-tag>-->
<!--                                <a-tag v-if="tagDisplay" color="#2db7f5" @click="tagLoadDisplay()">{{ "+" +-->
<!--                                    numOfLabelHide }}</a-tag>-->

        <div style="margin-left: 450px; margin-top: 30px">
            <a-input-group compact >
                <a-select defaultValue="title" :options="searchOptions" v-model:value="searchField" @change="handleSelectChange" size="large"></a-select>
                <a-input-search
                        v-model:value="searchQuery"
                        placeholder="请输入检索词"
                        onfocus="this.placeholder=''"
                        onblur="this.placeholder='请输入检索词'"
                        enter-button="Search"
                        size="large"
                        style="width: 600px"
                        @search="onSearch"
                />
            </a-input-group>
        </div>

        <div id="subject-box" style="margin-left: 500px; margin-top: 30px; width: 500px">
            <div id="overlay-text">学科限定</div>
            <div id="description-text">检索时默认选择所有学科</div>
            <a-checkbox-group v-model:value="subjectChoose" style="margin-left: 10px">
                <a-row>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="cs">Computer Science</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="phys">Physics</a-checkbox>
                        <a-dropdown>
                            <template #overlay >
                                <a-menu @click="handleMenuClick">
                                    <a-menu-item key="1">
                                        <UserOutlined />
                                        1st menu item
                                    </a-menu-item>
                                    <a-menu-item key="2">
                                        <UserOutlined />
                                        2nd menu item
                                    </a-menu-item>
                                    <a-menu-item key="3">
                                        <UserOutlined />
                                        3rd item
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button size="small">
                                all
                                <DownOutlined />
                            </a-button>
                        </a-dropdown>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="econ">Economics</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="q-bio">Quantitative Biology</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white; line-height: 1;" value="eess">Electrical Engineering and Systems Science</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="q-fin">Quantitative Finance</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="math">Mathematics</a-checkbox>
                    </a-col>
                    <a-col :span="12">
                        <a-checkbox style="height: 30px; color: white" value="stat">Statistics</a-checkbox>
                    </a-col>
                </a-row>
            </a-checkbox-group>
        </div>

        <a-row>
            <a-col :span="20" :offset="2" style="margin-top: 50px;">
                <a-row>
                    <a-col :span="12" style="text-align: left;">
                        <a-typography-text><strong>共找到{{ pagination.total }}篇论文</strong></a-typography-text>
                    </a-col>
                    <a-col :span="12" style="text-align: right;">
                        <strong> 排序:
                            <a-radio-group optionType="button" button-style="solid" defaultValue="time" :value="value" @change="handleSortChange"
                                           :options="sortOptions">
                            </a-radio-group>
                        </strong>
                    </a-col>
                </a-row>
                <a-row style="margin-top: 20px;">
                    <!-- 列表展示论文查询结果 -->
                    <a-list item-layout="vertical" size="large" style=" background: '#fff';margin-bottom: 4vh;"
                        :pagination="pagination" :data-source="paperDisplay" :split="false" :grid="{ column: 2 }">
                        <template #footer>
                            <div>
                                The recommendation is based on our model, Shenyang The One Rec.
                            </div>
                        </template>
                        <template #renderItem="{ item }">
                            <a-list-item key="item.paper_id" text-overflow="ellipsis">
                                <div class="paperName">
                                    <a-timeline>
                                        <a-timeline-item>
                                            <a-tooltip :title="item.title">
                                                <div v-if="highlightField === 'title'"
                                                    style="font-size:1.1em;font-weight:bold">
                                                    <span v-html="highlight(item.title)"></span>
                                                </div>
                                                <div v-else style="font-size:1.1em;font-weight:bold">
                                                    {{ item.title }}
                                                </div>
                                            </a-tooltip>
                                        </a-timeline-item>
                                    </a-timeline>
                                </div>
                                <a-card hoverable :bordered="true"
                                    style="background-color: rgb(247, 249, 252);border-radius: 2vh;">
                                    <a-card-meta>
                                        <template #description>
                                            <ul class="ul_list">
                                                <div>
                                                    <!-- 作者列表，可跳转至作者界面 -->
                                                    <a-typography-text strong>Authors:&nbsp;</a-typography-text>
                                                    <template v-for="{ author_id, author_name } in item.authors"
                                                        :key="author_id">
                                                        <div v-if="highlightField === 'author' && author_name.indexOf(highlightField) !== -1"
                                                            style="display:inline-block">
                                                            <a style="font-weight:bold"
                                                                @click="$router.push('/author_info?author_id=' + author_id)">{{
                                                                    author_name }}</a>.&nbsp;
                                                        </div>
                                                        <div v-else style="display:inline-block">
                                                            <a @click="$router.push('/author_info?author_id=' + author_id)">{{
                                                                author_name }}</a>.&nbsp;
                                                        </div>
                                                    </template>
                                                </div>
                                                <li ref="descRef">
                                                    <ListItem :listData="item.paper_abstract"></ListItem>
                                                </li>
                                            </ul>
                                            <!-- :content="highlightField==='abstract'?item.abstract.replace(new RegExp(highlightText, 'gi'), '&lt;b&gt $& &lt;/b&gt'):item.abstract" -->
                                            <div>
                                                <div style="display: inline-block;">
                                                    <a-tag v-for="category in item.categories" :key="category"
                                                        color="rgb(224, 242, 255)"
                                                        style="color: blue;border-radius: 10px;">{{
                                                            category }}</a-tag>
                                                </div>
                                                <div style="display: inline-block;margin-left: 2vh;">
                                                    {{ item.update_date + '\xa0\xa0' }}
                                                </div>
                                                <div style="display: inline-block;margin-left: 2vh;">
                                                    <a-tag color="rgb(255, 237, 221)"
                                                        style="color: rgb(205, 130, 20);border-radius: 10px;"
                                                        @click="showDrawer(item.paper_id)">{{
                                                            item.version
                                                        }}</a-tag>
                                                    <a-modal :visible="visibleDrawer" :footer="null" :width="700"
                                                        :destroyOnClose="true" @cancel="onClose">
                                                        <a-form>
                                                            <a-form-item>
                                                                <a-typography-text style="font-size: 1.4em" strong>{{
                                                                    item.title
                                                                }}</a-typography-text>
                                                            </a-form-item>
                                                            <a-form-item>
                                                                <div class="showTimeLine">
                                                                    <a-timeline>
                                                                        <a-timeline-item
                                                                            v-for="timeLinedes in timelineDesc">
                                                                            <a-card :title="timeLinedes"
                                                                                style='width: 55vh;height: 6.2vh; border-radius: 1vh;background-color: rgb(247, 249, 252);margin-left: 2vh;'>
                                                                            </a-card>
                                                                        </a-timeline-item>
                                                                    </a-timeline>
                                                                </div>
                                                            </a-form-item>
                                                        </a-form>
                                                    </a-modal>
                                                </div>
                                            </div>
                                        </template>
                                    </a-card-meta>
                                </a-card>
                                <div style="margin-top: 2vh;">
                                    <div v-if="item.favorite"
                                        style="display: inline-block;margin-left: 50vh;font-size: 2em;">
                                        <a-tooltip title="取消收藏">
                                            <icon-font type="icon-xihuan" @click="handleFavorite(item.paper_id)" />
                                        </a-tooltip>
                                    </div>
                                    <div v-else style="display: inline-block;margin-left: 50vh;font-size: 1.8em;">
                                        <a-tooltip title="收藏">
                                            <icon-font type="icon-xihuan1" tooltip="收藏"
                                                @click="handleFavorite(item.paper_id)" />
                                        </a-tooltip>
                                    </div>
                                    <div style="display: inline-block;font-size: 2em;margin-left: 4vh;">
                                        <a-tooltip title="相似">
                                            <icon-font type="icon-sousuo" key="more"
                                                @click="$router.push('/similar_paper?paper_id=' + item.paper_id)" />
                                            <!-- <BulbOutlined key="more" @click="handleSimilar(item.paper_id)"/>  -->
                                        </a-tooltip>
                                    </div>
                                    <div style="display: inline-block;font-size: 2em;margin-left: 4vh;">
                                        <a-tooltip title="查看论文">
                                            <icon-font type="icon-renwu" key="pdf" @click="handlePDF(item.url)" />
                                        </a-tooltip>
                                    </div>
                                </div>
                            </a-list-item>
                        </template>
                    </a-list>
                </a-row>
            </a-col>
        </a-row>
    </a-spin>

</template>

      


<script >
import {defineComponent, onMounted, reactive, toRefs, ref, onUnmounted} from 'vue'
import { StarOutlined, StarFilled, FilePdfOutlined, BulbOutlined, createFromIconfontCN, LeftCircleFilled, FilterOutlined } from '@ant-design/icons-vue'
import { search } from '@/api/post/search'
import { version_info } from '@/api/post/version_info'
import { tag_info } from '@/api/post/tag_info'
import { search_tag } from '@/api/post/search_tag'
import { favorite } from '@/api/post/favorite'
import { cloneDeep } from 'lodash-es'
import { icon_url } from '@/util/iconfont'
import dom_map from '@/constant/dom_map'
import globalVariable from '@/components/mathJax/globalVariable'
import ListItem from '@/components/card_components/ListItem'
import '@vuepic/vue-datepicker/dist/main.css'
import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'


const IconFont = createFromIconfontCN({
    scriptUrl: icon_url, //图标,随时更新
});

export default defineComponent({
    components: {
        StarOutlined,
        StarFilled,
        FilePdfOutlined,
        BulbOutlined,
        IconFont,
        ListItem,
        LeftCircleFilled,
        // FilterOutlined
    },

    setup() {
        const state = reactive({
            searchQuery: '',                // 搜索词
            searchField: 'title',           // 搜索范围，默认初始为标题
            paperList: [],                  // 论文列表
            paperDisplay: [],               // 展示论文列表
            loading: false,                 // 加载状态
            value: 'time',                  // 排序根据
            highlightText: '',               // 高亮词，和searchQuery区分防止在输入后触发
            highlightField: '',              // 同上，防止切换searchField之后直接触发高亮转换
            // tagSearchQuery: '',            //标签搜索
            startDate: '',
            endDate: '',
            timelineDesc: [],
            visibleDrawer: false,           //时间轴抽屉显示
            visibleLabelDrawer: false,      //标签筛选抽屉显示
            // visibleLabelButton: true,      //标签筛选按钮中的文本显示
            labelHome: true,                //标签筛选抽屉呈现首页
            tags: [],                       //标签筛选首页中呈现的标签
            tagsChecked: [],                //标签筛选首页中呈现的已经选中的标签
            tagsAll: [],                    //所有的可以获取到的标签的集合  
            tagsSearch: [],                 //下一级页面呈现的标签
            tagsLength: '',                 //所有标签的数量
            numOfLabel: '',                 //抽屉首页可加载的标签的数量
            numOfLabelHide: '',             //下一级可加载的标签的数量
            numOfLoad: '',                  //下一级的标签加载的次数
            tagDisplay: true,               //显示待加载的标签的个数的tag是否显示

            searchOptions: [
                { label: '标题', value: 'title' },
                { label: '摘要', value: 'abstract' },
                { label: '作者', value: 'author' },
                { label: '期刊', value: 'journal' },
            ],
            sortOptions: [
                { label: '按时间', value: 'time' },
                { label: '按兴趣', value: 'interest' },
            ],
            pagination: {
                //分页设置
                simple: true,
                defaultCurrent: 1,
                current: 1,
                defaultPageSize: 10,
                total: 0,
                onChange: (current) => {
                    //点击翻页后开始加载
                    state.loading = true
                    state.pagination.defaultCurrent = current
                    // 前端方括号内的数字 需更新
                    state.pagination.current = current
                    // 当前onchange无法设为async 由于要发送请求 update方法必然在spinning修改为true后完成
                    // 故在后面进行设置 达到美化加载的效果
                    update()
                    console.log("应该后发生")
                    spinning.value = true
                    //对当前的页面信息进行记录
                    // search(state.searchQuery, state.searchField, state.defaultPageSize, current, state.value).then((response) => {
                    //     if (response.data.status.code === 0) {
                    //         response.data.data.paperList.forEach((i) => {
                    //             i.key = i.paper_id ? i.paper_id : i.id
                    //         })
                    //         state.paperList = response.data.data.paperList
                    //     } else {
                    //         notification['error']({
                    //             message: '错误',
                    //             description: response.data.status.message,
                    //         })
                    //     }
                    //     //翻页操作完成后关闭加载
                    //     state.loading = false
                    // })
                },
            },
        })


        const spinning = ref(true)
        const categories = reactive([])
        const route = useRoute()
        const router = useRouter()
        const $route = useRoute();

        async function update() {
            // 调用搜索接口
            await search(state.searchQuery, state.searchField, state.defaultPageSize, state.pagination.defaultCurrent, state.value, state.tagsChecked, state.startDate, state.endDate).then(async (response) => {
                spinning.value = true
                if (response.data.status.code === 0) {
                    // 请求成功
                    state.pagination.total = response.data.data.total
                    state.paperList = response.data.data.paperList
                    state.paperDisplay = cloneDeep(state.paperList)
                    state.highlightText = state.searchQuery
                    state.highlightField = state.searchField
                }
                spinning.value = false
            })
            console.log("应该先发生")
            await checkLaTex()

        }

        onBeforeRouteLeave((to, from, next) => {
            // 在这里处理页面离开的逻辑
            if (from.meta.keepAlive) {
                let accessTime = 1
                if (sessionStorage.getItem($route.fullPath + 'accessTime') != null) {
                    accessTime = parseInt(sessionStorage.getItem($route.fullPath + 'accessTime'))
                    accessTime += 1
                }
                let _data = Object.assign(state.pagination, {})
                sessionStorage.setItem($route.fullPath + 'nowPageData' + accessTime, JSON.stringify(_data))
                sessionStorage.setItem($route.fullPath + 'nowSearchQuery' + accessTime, JSON.stringify(state.searchQuery))
                sessionStorage.setItem($route.fullPath + 'searchField' + accessTime, JSON.stringify(state.searchField))
                sessionStorage.setItem($route.fullPath + 'paperList' + accessTime, JSON.stringify(state.paperList))
                sessionStorage.setItem($route.fullPath + 'paperDisplay' + accessTime, JSON.stringify(state.paperDisplay))
                sessionStorage.setItem($route.fullPath + 'value' + accessTime, JSON.stringify(state.value))
                sessionStorage.setItem($route.fullPath + 'highlightField' + accessTime, JSON.stringify(state.highlightField))
                sessionStorage.setItem($route.fullPath + 'tagsChecked' + accessTime, JSON.stringify(state.tagsChecked))
                sessionStorage.setItem($route.fullPath + 'accessTime', JSON.stringify(accessTime))
                sessionStorage.setItem($route.fullPath + 'randomId' + accessTime, JSON.stringify(route.query.randomId))
            }
            next()
        })

        //选择时间范围
        const onChangeRangeDate = (value, dateString) => {
            state.startDate = dateString[0];
            state.endDate = dateString[1];
        }


        const checkLaTex = () => {
            globalVariable.initMathjaxConfig();
            globalVariable.MathQueue();
        }

        const updateSearch = () => {
            state.pagination.onChange(1)
        }

        //    用假接口传入表格数据
        onMounted(() => {
            if (sessionStorage.getItem($route.fullPath + 'accessTime') != null) {
                let accessTime = parseInt(sessionStorage.getItem($route.fullPath + 'accessTime'));
                if ((route.query.randomId === undefined) || (route.query.randomId === JSON.parse(sessionStorage.getItem($route.fullPath + 'randomId' + accessTime)))) {
                    spinning.value = true
                    let _obj = JSON.parse(sessionStorage.getItem($route.fullPath + 'nowPageData' + accessTime));
                    state.pagination.simple = _obj.simple
                    state.pagination.current = _obj.current
                    state.pagination.defaultCurrent = _obj.defaultCurrent
                    state.pagination.total = _obj.total
                    state.searchQuery = JSON.parse(sessionStorage.getItem($route.fullPath + 'nowSearchQuery' + accessTime));
                    state.searchField = JSON.parse(sessionStorage.getItem($route.fullPath + 'searchField' + accessTime));
                    state.paperList = JSON.parse(sessionStorage.getItem($route.fullPath + 'paperList' + accessTime));
                    state.paperDisplay = JSON.parse(sessionStorage.getItem($route.fullPath + 'paperDisplay' + accessTime));
                    state.highlightField = JSON.parse(sessionStorage.getItem($route.fullPath + 'highlightField' + accessTime));
                    state.value = JSON.parse(sessionStorage.getItem($route.fullPath + 'value' + accessTime));
                    state.tagsChecked = JSON.parse(sessionStorage.getItem($route.fullPath + 'tagsChecked' + accessTime));
                    sessionStorage.removeItem($route.fullPath + 'nowPageData' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'nowSearchQuery' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'searchField' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'paperList' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'paperDisplay' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'highlightField' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'value' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'tagsChecked' + accessTime);
                    sessionStorage.removeItem($route.fullPath + 'randomId' + accessTime);
                    if (accessTime == 1) sessionStorage.removeItem($route.fullPath + 'accessTime')
                    else {
                        sessionStorage.setItem($route.fullPath + 'accessTime', JSON.stringify(accessTime - 1))
                    }
                    spinning.value = false
                } else {
                    state.searchQuery = route.query.searchQuery
                    state.searchField = route.query.searchField
                    if (typeof state.searchField == "undefined") {
                        state.searchQuery = '',                // 搜索词
                            state.searchField = 'title'
                    }
                    update()

                }

            }
            else {
                state.searchQuery = route.query.searchQuery
                state.searchField = route.query.searchField
                if (typeof state.searchField == "undefined") {
                    state.searchQuery = '',                // 搜索词
                        state.searchField = 'title'
                }
                update()
            }
            initLabel();

            window.addEventListener('resize', handleResize);
            handleResize();
        })

        onUnmounted(() => {
            window.removeEventListener('resize', handleResize);
        });

        // 根据窗口大小隐藏标签筛选按钮中的文本
        const handleResize = () => {
            state.visibleLabelButton = (window.innerWidth >= 900);
        };

        // 获取所有的标签信息
        const initLabel = () => {
            tag_info().then((response) => {
                if (response.data.status.code === 0) {
                    let tmp = response.data.data
                    state.tagsLength = tmp.length
                    for (let i = 0; i < tmp.length; i++) {//循环，选项的个数即为tmp的长度
                        state.tagsAll.push({
                            label: tmp[i].label,
                            checked: false
                        });
                    }
                }
            })

        }

        //普通检索：按照标题/摘要/作者/期刊
        const onSearch = () => {
            if (state.searchField === "author") {
                // storePageInfo()
                router.push('/search_author?searchQuery=' + state.searchQuery + '&&searchField=' + state.searchField + '&&randomId=' + Math.random())
            }
            else {
                // 搜索操作更新论文列表
                if (state.searchQuery.length === 0) {
                    // 没有搜索内容时恢复原状
                    state.paperDisplay = state.paperList
                }
                let from
                // 丢弃先前的搜索结果
                if (state.paperList.length !== state.paperDisplay.length) {
                    from = state.paperList
                } else {
                    from = state.paperDisplay
                }
                updateSearch()
                // 设置spinning的代码逻辑与分页相同
                spinning.value = true
            }
        }

        const handleSortChange = (e) => {
            state.SelectedSort = e.target.value
            state.value = e.target.value
            // 排序依据更新后重新展示论文界面
            update()
            // 设置spinning的代码逻辑与分页相同
            spinning.value = true
        }

        const handleChange = (tag, checked) => {
            if (checked) {
                state.tagsChecked.push(
                    tag.label,
                )
            }
            else {
                state.tagsChecked = state.tagsChecked.filter((item) => {
                    return item != tag.label
                });
            }
            if (state.labelHome) {
                initTagShow()
            }
            else {
                initTagSearch()
            }


        }

        const handleFavorite = (paper_id) => {
            favorite(paper_id)
            update()
            // 设置spinning的代码逻辑与分页相同
            spinning.value = true
        }

        const showDrawer = (paper_id) => {
            state.timelineDesc = [],
                version_info(paper_id).then((response) => {
                    if (response.data.status.code === 0) {
                        let tmp = response.data.data;
                        for (let i = 0; i < tmp.length; i++) {//循环，选项的个数即为tmp的长度
                            state.timelineDesc.push(
                                `${tmp[i].version}  ${tmp[i].created}`
                            );
                        }
                    }
                })
            state.visibleDrawer = true
        };

        const onClose = () => {
            state.visibleDrawer = false
        };
        const onDrawerClose = () => {
            state.visibleLabelDrawer = false
        }

        //显示标签筛选文本
        const showLabelDrawer = () => {
            initTagShow()
            state.labelHome = true
            state.visibleLabelDrawer = true
        }

        const initTagShow = () => {
            state.tags = []
            let tmp = state.tagsChecked
            for (let i = 0; i < tmp.length; i++) {
                state.tags.push({
                    label: tmp[i],
                    checked: true
                })
            }
            let len = tmp.length
            let tagLen = 0
            while (len <= 40 && tagLen < state.tagsAll.length) {
                if (!state.tagsChecked.some(item => item === state.tagsAll[tagLen].label)) {
                    state.tags.push({
                        label: state.tagsAll[tagLen].label,
                        checked: false
                    });
                    len++;
                }
                tagLen++;
            }
            state.numOfLabel = state.tagsLength - state.tags.length
        }

        const handlePDF = (url) => {
            window.open(url, '_blank')
        }

        const handleSelectChange = (value) => {
            state.searchField = value
        }

        const highlight = (content) => {
            if (!state.highlightText || state.highlightText == '') return content
            let index = 0
            let parts = []
            while (index < content.length) {
                //全部转换为小写后比较
                let nextIndex = content.toLowerCase().indexOf(state.highlightText.toLowerCase(), index)
                if (nextIndex === -1) {
                    parts.push(content.slice(index))
                    break
                }
                if (nextIndex > index) {
                    parts.push(content.slice(index, nextIndex))
                }
                //复原字符串时按照content中的大小写进行拼接
                let matchCase = ''
                for (let i = 0; i < state.highlightText.length; i++) {
                    matchCase += content.charAt(nextIndex + i)
                }
                parts.push(matchCase)
                index = nextIndex + state.highlightText.length
            }
            return parts.map((part) => {
                if (part.toLowerCase() === state.highlightText.toLowerCase()) {
                    return '<span style="background-color:yellow">' + part + '</span>'
                } else {
                    return part
                }

            }).join('')
        }

        // 标签搜索页面呈现
        const labelPageChange = () => {
            if (state.labelHome) {
                state.tagSearchQuery = '',
                    state.numOfLoad = 2
                initTagSearch()
            }
            else {
                initTagShow()
            }
            state.labelHome = !state.labelHome
        }

        const tagLoadDisplay = () => {
            state.numOfLoad++
            initTagSearch()
        }


        //加载搜索页面要呈现的标签
        const initTagSearch = () => {
            state.tagsSearch = []
            if (state.tagSearchQuery.length === 0) {
                for (let i = 0; i < state.tagsChecked.length; i++) {
                    state.tagsSearch.push({
                        label: state.tagsChecked[i],
                        checked: true
                    });
                }
                let tagnum = 0
                for (let i = state.numOfLoad; i > 0; i--) {
                    let num = 3
                    while (state.tagsSearch.length < state.tagsAll.length && num > 0) {
                        if (!state.tagsChecked.some(item => item === state.tagsAll[tagnum].label)) {
                            state.tagsSearch.push({
                                label: state.tagsAll[tagnum].label,
                                checked: false
                            });
                            num--
                        }
                        tagnum++
                    }
                }
                state.numOfLabelHide = state.tagsAll.length - state.tagsSearch.length
                if (state.numOfLabelHide === 0) {
                    state.tagDisplay = false
                } else {
                    state.tagDisplay = true
                }
            }
            else {
                search_tag(state.tagSearchQuery).then((response) => {
                    if (response.data.status.code === 0) {
                        let tmp = response.data.data;
                        for (let i = 0; i < state.tagsChecked.length; i++) {
                            if (tmp.some(item => item.label === state.tagsChecked[i])) {
                                state.tagsSearch.push({
                                    label: state.tagsChecked[i],
                                    checked: true
                                });
                            }
                        }
                        for (let i = 0; i < tmp.length; i++) {
                            if (!state.tagsChecked.some(item => item === tmp[i].label)) {
                                state.tagsSearch.push({
                                    label: tmp[i].label,
                                    checked: false
                                });
                            }
                        }
                    }
                })
                state.tagDisplay = false
            }


        }



        return {
            ListItem,
            ...toRefs(state),
            spinning,
            tagLoadDisplay,
            initTagSearch,
            labelPageChange,
            handleChange,
            onSearch,
            initTagShow,
            onChangeRangeDate,
            handleFavorite,
            handlePDF,
            handleSelectChange,
            handleSortChange,
            showDrawer,
            highlight,
            onClose,
            initLabel,
            update,
            onDrawerClose,
            showLabelDrawer,
            route,
            router,
            categories,
            dom_map,
        };

    },

});
</script>

<style scoped lang="scss">

/*学科限定的默认描述*/
#description-text {
    position: relative;
    top: -20px;
    left: 10px;
    font-weight: bold;
    font-size: 13px;
    color: rgba(190, 190, 190, 0.8);
    z-index: 1;
}

/*学科限定框的板块名*/
#overlay-text {
    position: relative;
    top: -25px;
    left: 10px;
    font-weight: bold;
    font-size: 16px;
    color: white;
    z-index: 1;
}

/*学科限定框*/
#subject-box {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 10px;
}

.site-input-group-wrapper .site-input-split {
    background-color: #fff;
}

.site-input-group-wrapper .site-input-right {
    border-left-width: 0;
}

.site-input-group-wrapper .site-input-right:hover,
.site-input-group-wrapper .site-input-right:focus {
    border-left-width: 1px;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right {
    border-right-width: 0;
}

.site-input-group-wrapper .ant-input-rtl.site-input-right:hover,
.site-input-group-wrapper .ant-input-rtl.site-input-right:focus {
    border-right-width: 1px;
}
[data-theme='dark'] .site-input-group-wrapper .site-input-split {
    background-color: transparent;
}

.ul_list {
    margin: 0;
    padding: 0;

    li {
        list-style: none;
        border-radius: 8px;
        display: flex;
        overflow: hidden;
    }
}

//.self-check-tag {
//    display: inline-block;
//    margin-top: 2vh;
//    min-width: 20vh;
//
//    .ant-tag {
//        border: 1px solid #d6d1d1;
//        border-radius: 1vh;
//        margin: 0.5vh 0.6vh
//    }
//
//
//}

//.icon_inline {
//    display: inline-block
//}


//:deep(.ant-btn-primary) {
//    color: #fff;
//    border-color: #59baff;
//    background: #59baff;
//
//}

.paperName {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 1.7em;

    :deep(.ant-timeline-item-head) {
        position: absolute;
        width: 1.5vh;
        height: 1.5vh;
        background-color: rgb(49, 122, 247);
        border: 0.5vh solid transparent;
        border-color: #ffffff;
        border-radius: 100%;
        box-shadow: 0 0 0.5vh rgb(179, 177, 177);
    }

    .ant-timeline-item {
        padding-bottom: 0;
    }

}

.showTimeLine {
    :deep(.ant-timeline-item-head) {
        position: absolute;
        width: 2.5vh;
        height: 2.5vh;
        background-color: rgb(84, 48, 169);
        border: 0.7vh solid transparent;
        border-color: #ffffff;
        border-radius: 100%;
        box-shadow: 0 0 0.5vh rgb(179, 177, 177);
    }

    :deep(.ant-timeline-item-tail) {
        top: 1.5vh;
        left: 1.3vh;
    }
}




:global(.ant-modal-content) {
    border-radius: 1vh;

    .ant-modal-body {
        height: 70vh;
        overflow-y: auto;
    }

}</style>
